<template> 
<div class="search-view">
    <div class="one">
        <div class="search box-shadow_2">
            <el-input 
                clearable placeholder="请输入名称 / 标签" 
                v-model="searchData"
                v-on:keyup.enter="onSearch">
                <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
            </el-input>
        </div>
        <MyTabsSlot
            class="tab-list"
            :activeIndex="activeIndex">
            <div
                :class="{
                    'item':true,
                    'active-item':activeIndex==index,
                }"
                v-for="(item,index) in optionList"
                :key="index"
                @click="activeIndex=index">
                {{item.title}}
            </div>
        </MyTabsSlot>
    </div>
    <div class="two">
        <div class="top">
            <template v-if="activeIndex==1"> 
                <div class="item" 
                    v-for="item in dataList" 
                    :key="item.id"> 
                    <ColorItem
                        :itemData="item">
                    </ColorItem>
                </div>
            </template>
            <template v-if="activeIndex==2"> 
                <div class="item" 
                    v-for="item in dataList" 
                    :key="item.id"> 
                    <GradientItem
                        :itemData="item">
                    </GradientItem>
                </div>
            </template>
            <template v-if="activeIndex==3"> 
                <div class="item" 
                    v-for="item in dataList" 
                    :key="item.id"> 
                    <ShadowItem
                        :itemData="item">
                    </ShadowItem>
                </div>
            </template>
        </div>
    </div>
    <Loading
        :state="loading">
    </Loading>
</div>
</template>

<script>
import {debounceFn} from "@/common/DebounceAndThrottle";
import MyTabsSlot from '@/components/MyTabsSlot';
import ColorItem from '@/components/color/ColorItem';
import GradientItem from '@/components/gradient/GradientItem';
import ShadowItem from '@/components/shadow/ShadowItem';
import Loading from '@/components/other/Loading';
export default { 
    name: 'Search',
    components: {
        ColorItem,MyTabsSlot,
        GradientItem,
        ShadowItem,
        Loading,
    },
    data(){
        this.optionList = [
            {title:'颜色',value:1},
            {title:'渐变色',value:2},
            {title:'边框阴影',value:3},
        ];
        return{
            loading:false,
            activeIndex:0,  //当前选择的索引
            searchData:null,
            dataList:[],
        };
    },
    watch:{
        $route:{
            handler(){
                if(this.$route.query.searchData){ 
                    this.$nextTick(() => {  //防止第一次刷新监听不到searchData的变化
                        this.searchData = this.$route.query.searchData;
                    });
                }
                if(this.$route.query.activeIndex){
                    this.$nextTick(() => {
                        this.activeIndex = this.$route.query.activeIndex;
                    });
                }
            },
            immediate:true,
        },
        activeIndex(){
            this.onSearch();
        },
        searchData(){
            this.onSearch();
        },
    },
    methods:{
        onSearch:debounceFn(function(){
            if(this.loading) return;
            if(!this.searchData) {
                this.dataList = [];
                return;
            };
            this.loading = true;
            this.$Api.searchData({
                searchData:this.searchData,
                dataType:this.optionList[this.activeIndex].value,
            }).then((data)=>{
                this.dataList = data;
            }).catch(({msg}) =>{
                this.$message.error(msg);
            }).finally(()=>{
                this.loading = false;
            });
        },300),
    },
}
</script>
<style lang="scss" scoped>
.search-view{
    width: var(--container-width);
    margin: 0 auto;
    padding-top: 35px;
    display: grid;
    grid-gap: 35px;
    grid-template-rows: min-content 1fr;
    grid-template-areas: "one" "two";
    grid-auto-flow:row dense;
    color: #3a3a59;
    font-size: 1.5rem;
    .one{
        height: fit-content;
        grid-area: one;
        border-radius: 4px;
        font-size: 1.7rem;
        line-height: 1.7rem;
        color: #3a3a59;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        >.search{
            width:400px;
            margin-top: 15px;
            border-radius: var(--border-radius-0);
            border: 1px solid var(--border-color);
            overflow: hidden;
            transition: all 0.2s;
            padding: 3px;
            background-color: white;
            /deep/.el-input__inner{
                border:none;
                padding: 0;
                padding-left: 20px;
            }
            /deep/.el-input-group__append{
                border:none;
                background-color: #ffffff;
            }
            /deep/i{
                font-weight: bold;
                font-size: 1.5rem;
            }
            /deep/input{
                &:focus{
                    border-color: #DCDFE6;
                }
            }
            &:focus-within{
                border-color: #ffd966 !important;
            }
        }
        .tab-list{
            width: fit-content;
            border: 1px solid var(--border-color);
            background-color: transparent;
            margin: 15px auto;
            >.item{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 7px 3px;
                cursor: pointer;
                font-size: 17px;
                color: #7e7e7e;
            }
            >.active-item{
                color: #1e80ff;
                font-weight: bold;
            }
        }
    }
    .two{
        height:fit-content;
        grid-area: two;
        >div{
            width:100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        >.top{
            >.item{
                width:220px;
                margin: 0px 10px 20px 10px;
            }
        }
    }
}
</style>

